<template>
  <div class="thumbsUp">
    <div class="thumbsUpMain">
      <div class="thumbsUpTitle flexc">
        <span>{{ $t('apiTrade.getReward') }}</span>
      </div>
      <div class="thumbsUpCont">
        <div class="rules">
          <p class="center">{{ $t('apiTrade.articleThumbsUp') }}</p>
          <div class="flexc">
            <span @click="handleApplyArticle">{{ $t('apiTrade.submitInfo') }}</span>
          </div>
        </div>
        <div class="rulesCont clearfix">
          <ul>
            <template v-for="(item, index) in articleList">
              <li :key="item.id" v-if="index < rowCount">
                <div class="hot" v-if="index < 3">
                  {{ $t('apiTrade.hot') }}
                </div>
                <p class="listTitle">{{ item.title }}</p>
                <p class="listWord">{{ item.introduction }}</p>
                <div class="flexb listCont">
                  <div class="listName fn-text1">
                    <span>{{ $t('apiTrade.from') }}{{ item.media }}</span>
                  </div>
                  <div class="flexb">
                    <div class="Collect flex liked" v-if="item.liked" @click="$message.warning($t('apiTrade.liked'));">
                      <i class="iconfont icon-dianzan"></i>
                      <span>{{ $t('apiTrade.liked') }}: {{ item.likeCount }}</span>
                    </div>
                    <div class="Collect flex" v-else @click="handleThumbsUpAuthorized(item.id)">
                      <i class="iconfont icon-dianzan"></i>
                      <span>{{ $t('apiTrade.like') }}: {{ item.likeCount }}</span>
                    </div>
                    <div class="shareBtn" v-clipboard:copy="$t('apiTrade.copyHref')"
                      v-clipboard:success="onCopy"
                      v-clipboard:error="onError">
                      {{ $t('apiTrade.share') }}
                    </div>
                  </div>
                </div>
              </li>
            </template>
          </ul>
          <span class="lookMore fr" @click="handleShowMore" v-if="lookMoreHide">{{ $t('apiTrade.seeMore') }} ></span>
        </div>
      </div>
    </div>
    <a href="" class="hidden" target="_blank" ref="target"></a>
  </div>
</template>

<script>
import { authorized } from '@/utils/validate';

export default {
  name: 'thumbsUp', // 点赞页面
  data() {
    return {
      articleList: [], // 文章列表
      rowCount: 5, // 显示条数
      lookMoreHide: false, // 显示查看更多
    }
  },
  components: {},
  props: {},
  watch: {
    '$store.state.app.scatter.identity': {
      handler: function listen() {
        this.handleCompetitionInfo();
      },
      deep: true,
    },
  },
  computed: {},
  created() {
    document.title = this.$t(`rout.${this.$route.meta.title}`);
  },
  mounted() {
    this.handleCompetitionInfo();
  },
  beforeDestroy() {},
  methods: {
    // 获取交易大赛文章列表
    handleCompetitionInfo(val) {
      const params = {
        eventCode: 'api-trade'
      };
      this.$http.post('/eventArticle/list', params).then((res) => {
        if (res.code !== 0) {
          // this.$message.error(res.msg);
          return;
        }
        if (res.articleList.length > 5 && val !== 'liked') {
          this.lookMoreHide = true;
        }
        this.articleList = res.articleList;
      });
    },
    // 授权
    handleThumbsUpAuthorized(id) {
      // 判断有无登录
      const scat = this.$store.state.app.scatter;
      if (scat && !scat.identity) {
        this.handleWalletPermission();
        return;
      }
      authorized(this, (code, res) => {
        if (code === 'error') { // 授权错误
          console.log(res); // eslint-disable-line
          return;
        }
        this.handleThumbsUp(id);
      });
    },
    // 文章点赞
    handleThumbsUp(id) {
      const params = {
        articleId: id
      };
      this.$http.post('/eventArticle/like', params).then((res) => {
        if (res.code === 1021) {
          this.$message.warning(this.$t('apiTrade.liked'));
          return;
        }
        if (res.code !== 0) {
          this.$message.error(this.$t('apiTrade.likeError'));
          return;
        }
        this.$message.success(this.$t('apiTrade.likeSuccess'));
        this.handleCompetitionInfo('liked');
      });
    },
    // 提交文章
    handleApplyArticle() {
      // 重新打开一个页面 - 申请页
      const target = this.$refs.target;
      const origin = window.location.origin
      target.setAttribute('href', `${origin}/apply?type=4`);
      target.click();
    },
    // 登录授权
    handleWalletPermission() {
      const checkWallet = localStorage.getItem('checkWallet');
      if (!Number(checkWallet)) {
        this.$emit('listenWalletPermission', true);
        return;
      }
      this.$emit('listenWalletLogin', true);
    },
    // 查看更多
    handleShowMore() {
      this.rowCount = 999;
      this.lookMoreHide = false;
    },
    onCopy() {
      this.$message.success(this.$t('myWallet.copySuccess'));
    },
    onError() {
      this.$message.error(this.$t('myWallet.copyError'));
    },
  },
}
</script>
<style lang="scss" scoped>
.thumbsUp{
  background: #090D0E;
  min-height: 1200px;
  padding: 110px 0 50px;

  .thumbsUpMain {
    margin: 0 auto;
    width: 1100px;
  }

  .thumbsUpTitle {
    font-size: 45px;
    color: #00F9F9;
    margin-bottom: 44px;
  }

  .thumbsUpCont {
    padding: 40px;
    min-height: 100px;
    border-radius: 15px;
    border: 1px solid #77F7FA;

    .rules {
      font-size: 21px;
      color: #77F7FA;
      margin-bottom: 50px;

      span {
        display: inline-block;
        padding: 12px 39px;
        background: #26ADFC;
        border-radius: 10px;
        color: #fff;
        cursor: pointer;
        margin-top: 30px;
      }
    }
    .rulesCont {
      color: #fff;
      li {
        position: relative;
        padding: 52px 20px 33px;
        background-image: linear-gradient(-87deg, rgba(48, 226, 236, .68) 0%, rgba(17, 123, 225, .68) 100%);
        border-radius: 10px;
        margin-bottom: 12px;

        .hot {
          position: absolute;
          top: 0;
          left: 0;
          width: 94px;
          height: 39px;
          background: #F5A623;
          border-radius: 10px 0 5px 0;
          line-height: 39px;
          text-align: center;
          font-size: 18px;
        }

        .listTitle {
          font-size: 24px;
          color: #77F7FA;
          margin-bottom: 15px;
        }

        .listWord {
          font-size: 18px;
          line-height: 28px;
          margin-bottom: 15px;
        }

        .listCont {
          font-size: 18px;

          .listName {
            width: 600px;
          }

          .Collect {
            margin-right: 20px;
            cursor: pointer;

            i {
              display: inline-block;
              margin-right: 5px;
              font-size: 24px;
            }

            &.liked {
              color: #F5A623;
            }
          }

          .shareBtn {
            text-align: center;
            background: #F5A623;
            border-radius: 10px;
            width: 112px;
            line-height: 46px;
            cursor: pointer;
          }
        }
      }

      .lookMore {
        display: inline-block;
        margin: 30px 0 0;
        font-size: 21px;
        color: #77F7FA;
        cursor: pointer;
      }
    }
  }
}
</style>

